import React, { Component } from 'react';
import {
    CellboxContainer,
    CellLeftbox,
    CellRightbox,
    YouthVersion,
    CellGoodsbox,
    DailySelection,
    Commodity
} from 'pages/home/cellbox/styleCellboxComponents'
import getHome from 'utils/getHome'
import {Dividerline} from 'components/common/Dividerline'

const CellboxItem = (props)=>{
    // console.log(props)
    return(
        <img src={props.src}/>
    )
}

const CellboxItemRight = (props)=>{
    return(
        <img src={props.src}/>
    )
}

const YouthVersionInner = (props)=>{
    return (
        <img src= {props.src}/>
    )
}

const DailySelectionInner  = (props)=>{
    return (
        <img src = {props.src}/>
    )
}

const CommoditySingleItemInner = (props)=>{
    return (
        <div className="list_two_type1 ">
            <img src={props.src}/>

            <div className="info">
                <p className="name">{props.product_name}</p>
                <p className="brief">{props.product_brief}</p>
                <div className="price">
                    ￥{props.product_price}
                    <span>起</span>
                </div>
                <div className="old_price">
                    ￥{props.product_org_price}
                    <span>起</span>
                </div>
            </div>
           
        </div>
    )
}

class Cellbox extends Component {
    componentWillMount(){
        this.props.getBannerBottomFirstBox()
    }

    componentDidUpdate() {
        // let a =this.props.first && this.props.first.map((item)=>{
        //     return item.img_url
        // })
        // let a= this.props.first && this.props.first.slice(4,5)
        // console.log(a)        // console.log(this.props.first[5].body.items[0].img_url)
        console.log(this.props)
    }

    renderItem(){
        // console.log(this.props.first)
        return this.props.first && this.props.first[3].body.items.slice(0,1).map((item)=>{
            return <CellboxItem key={item.material_id} src={item.img_url}  {...item}></CellboxItem>
        })
    }     

    renderRightItem(){
        // console.log(this.props.first.slice(1,3) )
        // console.log(this.props && this.props.first.slice(1,3))
        return this.props.first && this.props.first[3].body.items.slice(1,3).map((item)=>{
            return <CellboxItemRight key={item.material_id} src={item.img_url}></CellboxItemRight>
        })

    }

    renderYouthVersion(){
        return this.props.first && this.props.first[5].body.items.map((item)=>{
            return <YouthVersionInner key={item.material_id} src={item.img_url}></YouthVersionInner>
        })
    }

    renderDailySelection(){
        return this.props.first && this.props.first[7].body.items.map((item)=>{
            return <DailySelectionInner key={item.material_id} src={item.img_url}></DailySelectionInner>
        })
    }

    renderCommoditySingleItem(){
        return this.props.first && this.props.first[9].body.items.map((item)=>{
            return <CommoditySingleItemInner key={item.product_id} src={item.img_url} {...item}></CommoditySingleItemInner>
        })
    }

    render() {
        //将UIcomponent传进gethome的函数中  render函数的执行次数就会少一次 这是一次性能的优化 减少一次渲染
        // console.log(a)
        return (
            <CellboxContainer>
                <CellGoodsbox>
                    <CellLeftbox>
                    {this.renderItem()}
                    </CellLeftbox>
                    <CellRightbox>
                        {this.renderRightItem()}
                    </CellRightbox>
                </CellGoodsbox>
                <Dividerline></Dividerline>
                <YouthVersion>
                    {this.renderYouthVersion()}
                </YouthVersion>
                <Dividerline></Dividerline>
                <DailySelection>
                    {this.renderDailySelection()}
                </DailySelection>
                <Commodity>
                        {this.renderCommoditySingleItem()}
                </Commodity>
            </CellboxContainer>
          
        )
    }
}

export default getHome(Cellbox);  